<template>
	<view class="distribution" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!isEmpty">
		<view class="top p-t-50" :style="'background-color: #00dd83;'">
			<image class="bg p-t-20" :src="$xyfun.image('/static/images/distribution-bg.png')" mode="widthFix" />
			<view class="level  p-20 flex tc-w" :style="'background-color: #00dd83;'">
				<view class="l"><image :src="$xyfun.image('/static/images/level_icon.png')" /></view>
				<view class="c m-l-15">
					<view class="tb lh-30 m-t-15">{{distributionInfo.level.name}}</view>
					<view class="ts-28 m-t-10">邀请好友下单可获得佣金</view>
				</view>
			</view>
		</view>
		
		<view class="money m-30 p-30" :style="'background-color: #ffffff;'">
			<view class="flex">
				<view>
					<view :style="'color:#808080;'">可提现（元）</view>
					<view class="ts-40 m-t-15 " :style="'color:#ff5335;'">{{distributionInfo.commission||0.00}}</view>
				</view>
				<view class="m-l-auto" :style="'color:#808080;'" @tap="$xyfun.to('/pages/user/withdraw/list?type=distribution')">
					提现记录
					<text class="xyicon icon-right"></text>
				</view>
			</view>
			<view class="flex m-t-40">
				<view class="col-3">
					<view :style="'color:#808080;'">总佣金</view>
					<view class="ts-40 m-t-15">{{distributionInfo.total_commission||0.00}}</view>
				</view>
				<view class="col-3">
					<view :style="'color:#808080;'">已提现佣金</view>
					<view class="ts-40 m-t-15">{{distributionInfo.withdrawn_commission||0.00}}</view>
				</view>
				<view class="col-3">
					<view :style="'color:#808080;'">提现中佣金</view>
					<view class="ts-40 m-t-15">{{distributionInfo.withdrawing_commission||0.00}}</view>
				</view>
			</view>
			<button :style="'background-color: #00dd83;'" class="withdraw-btn ts-30 lh-30 p-25 tc-w m-t-50" @tap="$xyfun.to('/pages/user/withdraw/apply?type=distribution')">申请提现</button>
		</view>
		
		<view class="menu-list m-30 p-lr-30 p-t-50 flex" :style="'background-color: #ffffff;'">
			<view class="item col-2 flex m-b-50" v-for="(item,index) in menuList" :key="index" @tap="menuLink(index,item.url)">
				<image :src="$xyfun.image('/static/images/distribution/menu')+index+'.png'" />
				<view class="m-l-20 lh-30">
					<view class="tb m-t-15">{{item.name}}</view>
					<view :style="'color:#808080;'" class="ts-26 m-t-10">{{ index == 0 ? (distributionInfo.two_child_num + distributionInfo.one_child_num)+'人'  : item.des}}</view>
				</view>
			</view>
		</view>
		
		<!--分享组件 -->
		<xy-share v-model="showShare" posterType="user" />
		
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import xyShare from '@/components/xy-share';
	export default {
		components: {
			xyShare
		},
		data() {
			return {

				role:'distribution',
				distributionInfo:{},
				isEmpty:true,
				showShare:false,
				menuList:[
					{name:'我的团队',url:'/pages/user/distribution/team'},
					{name:'推广海报',url:'',des:'邀请好友'},
					{name:'分销订单',url:'/pages/user/distribution/order',des:'分销订单明细'},
					{name:'账单报表',url:'/pages/user/distribution/bill',des:'佣金变更明细'},
				],
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad(options) {

			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			
			...mapActions('user',{'getDistributionInfo':'getDistributionInfo'}),
			
			loadData(){
				this.getDistributionInfo().
					then(res => {
						uni.stopPullDownRefresh();
						if(res.status == 'normal'){
							this.isEmpty = false;
							this.distributionInfo = res.data;
						}else{
							this.$xyfun.msg(res.msg);
						}
					});
			},
			
			menuLink(index,path){
				if(index == 1){
					this.showShare = true;
				}else{
					this.$xyfun.to(path);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.distribution{
		.top{
			position: relative;
			.bg{
				width: 750rpx;
			}

			.level{
				position: absolute;bottom: 0rpx;left: 30rpx;border-radius: 20rpx 20rpx 0 0;width: 650rpx;
				.l{
					image{width: 100rpx;height: 100rpx;}
				}
				.r{height: 60rpx;line-height: 60rpx;border-radius: 30rpx;}
			}
		}
		
		.money{
			.withdraw-btn{border-radius: 40rpx; width: 500rpx;}
		}
		
		.menu-list{
			image{width: 90rpx;height: 90rpx;}
		}
		
	}
</style>